<template>
  <div class="app-container">

    <div class="head-container flex-center" style="border-bottom: 1px solid #ddd;">
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>页面模板（无左侧树）</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="text-align: right">
        <el-button type="primary"
                   plain
                   size="small">操作按钮1
        </el-button>
        <el-button type="danger"
                   plain
                   size="small">操作按钮2
        </el-button>
      </div>
    </div>

    <div class="body-container">
      <el-form :model="queryParams"
               ref="queryForm"
               class="queryForm"
               :inline="true">
        <el-form-item label="搜索框：" prop="roleName">
          <el-input v-model="queryParams.keywords"
                    placeholder="请输入关键字"
                    clearable
                    size="small" />
        </el-form-item>
      </el-form>

      <el-table v-loading="loading"
                :data="roleList"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center"/>
        <el-table-column label="测试字段1"
                         prop="test"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="测试字段1"
                         prop="roleType"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="测试字段1"
                         prop="order"/>
        <el-table-column label="测试字段1"
                         prop="remark"/>
        <el-table-column label="测试字段1"
                         align="center"/>
        <el-table-column label="测试字段1"
                         align="center"
                         :formatter="row => dateFormatter(row, 'createTime')"
                         prop="createTime"
                         width="180"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="small"
                       type="primary"
                       plain
                       icon="el-icon-edit">编辑
            </el-button>
            <el-button size="small"
                       type="danger"
                       plain
                       icon="el-icon-delete">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>

  </div>
</template>

<script>
  import Select from '@/components/form/Select'

  export default {
    name: "Role",
    components: {Select},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 角色表格数据
        roleList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          status: undefined,
          roleName: undefined,
        },
        // 表单参数
        form: {},
      }
    },
    created() {
      this.getList()
      // 字典查询
      // this.getDicts("sys_normal_disable").then(response => {
      //   this.statusOptions = response.data
      // })
    },
    methods: {
      /** 查询数据 */
      getList() {
        this.loading = false
      },
      // 表单重置
      reset() {
        this.form = {}
        this.resetForm("form")
      },
      /** 多选框选中数据 */
      handleSelectionChange(selection) {

      },
    }
  }
</script>

<style lang="scss">
  .queryForm {
    .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>
